<template>
  <v-col :sm="12" :md="col" :gap="col">
    <v-card
      class="overflow-hidden transition-all hover:shadow-md h-full flex flex-column cursor-pointer hover:bg-[#f5f5f5]"
      @click="handleClick"
    >
      <div class="relative p-4">
        <v-img
          :src="product.headerImg || ''"
          aspect-ratio="1"
          class="object-contain p-4"
        ></v-img>
        <v-badge
          v-if="product.isNew"
          color="black"
          text-color="white"
          class="absolute top-2 left-2 px-2 py-1 text-xs"
        >
          NEW
        </v-badge>
      </div>
      <v-card-text class="pt-0 flex-grow">
        <h3 class="text-base font-semibold text-[#413E3A]">
          {{ product.name }}
        </h3>
      </v-card-text>
      <div class="p-4 pt-0">
        <div class="flex justify-between items-baseline mb-2">
          <span>
            <span class="text-sm text-gray-500 mr-1">USD</span>
            <span class="text-2xl font-bold text-blue-600">{{ product.price }}+</span>
          </span>
          <span class="text-sm text-gray-400 line-through ml-2">
            <span class="font-medium">Org. Price:</span> {{ product.oldPrice }}+
          </span>
        </div>
        <p class="text-sm text-gray-600">
          {{ product.desc }}
        </p>
      </div>
    </v-card>
  </v-col>
</template>

<script setup lang="ts">
import { ref } from "vue";

const props = defineProps({
  product: {
    type: Object,
    default: () => ({}),
  },
  col: {
    type: Number,
    default: 4,
  },
});

const handleClick = () => {
  const { origin } = window.location;
  const targetLink = origin + "/product-detail?id=" + props.product.pid;
  window.open(targetLink, "_blank");
};
</script>
